<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="baidu-site-verification" content="WiX7fVzanY" />
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <meta name="description" content="这是一个不仅可以学习而且可以灵活社交的平台，在这里，学习不再枯燥无味，期待你的加入。">
  <meta name="keywords" content="记忆课堂,记忆,课堂,徐嘉正,memory,memoryclass,class,memoryClass,it,javascript,社交,聊天,资源">
  <title>记忆课堂</title>
    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/stylesheets/base.css">
    <link rel="stylesheet" href="/stylesheets/index.css">
    <style>
      html, body {
        height: 100%;
      }

      #app {
        opacity: 0;
      }
      

      

    </style>

</head>
<body>
  

  

  <div id="app">

    <div class="shortcut-btn-box">
      <ul class="shortcut-btn-group">
        <li class="shortcut-btn-item publish-btn"><a href="#publish-box">发帖</a></li>
        <li class="shortcut-btn-item"><a href="#spit-box">吐槽</a></li>
        <li class="shortcut-btn-item"><a href="/test/center.html">练习</a></li>
        <li class="shortcut-btn-item"><a href="/resource/center.html">资源</a></li>
        <li class="shortcut-btn-item hide-btn" onclick="document.querySelector('.shortcut-btn-box').style.display='none'"><a href="javascript:void(0)">隐藏</a></li>
      </ul>
    </div>

    <div class="bar clearfix">
      <div class="container">
        <span class="bar-en">memory class</span>
        <div class="user-box pull-right">
          <a :href="'/user/center.html?id=' + userInfo.id" v-show="logined">
            <span class="user-name" v-text="userInfo.name.slice(0,2)"></span>
          </a>
          <a href="/user/login.html" v-show="!logined">
            <span class="my-btn">登陆</span>
          </a>
        </div>
      </div>
    </div>

    <div class="container body">
      
      <div class="clearfix">
        <inform-component></inform-component>
      </div>

      <div class="clearfix">
        <div class="col-md-3 clearfix leftFlex text-center">
          <div class="test leftFlex-item col-md-12 mb-15">
            <a class="link-body" href="/test/center.html" >
              <div class="my-mark">
                <span class="glyphicon glyphicon-fire"></span>
              </div>
              <h3>训练场</h3>
            </a>
            <div class="desc">
              训练场内主要包含一些IT类的基础知识练习题和一些经典的面试题目哦，小伙伴们可以进入到里面练习，早日修成正果哦！
            </div>
          </div>
          <div class="resource leftFlex-item col-md-12 ">
            <a class="link-body" href="/resource/center.html" >
              <div class="my-mark">
                <span class="glyphicon glyphicon-book"></span>
              </div>
              <h3>学习资源库</h3>
            </a>
            <div class="desc">
              这里包含了一些前端经典的书籍和其他学习网站，供大家来学习。
            </div>
          </div>
          <div class="ad-location hidden-xs leftFlex-item col-md-12 ">
            广告位-未开发
          </div>
          <div class="ad-location hidden-xs leftFlex-item col-md-12 ">
            广告位-未开发
          </div>

        </div>
        <div class="col-md-6 centerFlex">
          <community-component></community-component>
          
        </div>
        <div class="col-md-3 rightFlex">
          <div class=" rightFlex-item mb-15">
            <new-active-component></new-active-component>
          </div>
          <div class="spit rightFlex-item">
            <spit-component></spit-component>
          </div>
        </div>
      </div>

    </div>

    <footer>
      
    </footer>

  </div>
    
  <template id="inform">
    <div class="inform-box mh-20 col-md-6 col-md-offset-3 col-xs-12">
      <span class=" glyphicon glyphicon-bullhorn col-md-2 col-xs-2"></span>
      <div class="col-md-9 inform-content col-xs-8"></div>
      <span @click="checkMoreInform" class=" glyphicon glyphicon-list-alt col-md-1 col-xs-1"></span>
    </div>
  </template>

  <template id="community-item">
    <li class="post-list-item">
      <section>
        <h5 class="clearfix">
          <a :href="'/post/detail.html?id=' + item.id">{{item.title}}</a>
          <a :href="'/user/center.html?id=' + item.handler.id" class="text-muted pull-right">
            <small>{{item.handler.name}} </small>
          </a> 
        </h5>
        <article >
          <span>{{item.content}} </span>
        </article>
        <div class="article-footer clearfix">
          <div class="pull-left color-gray">
            <span class="time label-item">
              @ {{item.updatedAt | date}}
            </span>
            <span class="commmentCount label-item">
              评论[{{item.commentCount}}]
            </span>
            <span class="readCount label-item">
              阅读[{{item.readCount}}]
            </span>
          </div>
          
          <span class="pull-right">
            <a class="showDetail" :href="'/post/detail.html?id=' + item.id" >查看帖子</a>
          </span>

        </div>
      </section>
    </li>
  </template>
    
  <template id="community-publish">
    <div class="community-publish" id="publish-box">
      <h4 class="color-orange">
        发表新帖
        <small class="color-orange"><span class="glyphicon glyphicon-pencil"></span></small>
      </h4>
      <div class="publish-area mt-10">
        <div class="new-post-item">
          <input type="text" class="post-title post-input" 
          v-model="post.title" placeholder="请输入标题">
        </div>
        <div class="new-post-item">
          <textarea class="post-content post-input" 
            v-model="post.content" placeholder="请输入副标题">
          </textarea>
        </div>
        <div class="new-post-item clearfix">
          <button class="btn btn-primary pull-right" @click="publishPost">发表帖子</button>
        </div>
      </div>
    </div>
  </template>

  <template id="community">
    <div class="community">
      <h4 class="text-left">
        <span class="glyphicon home-icon glyphicon-home"></span>社区.广场
      </h4>
      <div class="community-body clearfix">
        <ul class="post-list">
          <community-item-component v-for="item in list" :item="item"></community-item-component>
        </ul>
        <div class="handlerPage clearfix">
          <button class="btn btn-default pull-right" v-show="list.length == 10" @click="changePage(1)">
            下一页
          </button>
          <button class="btn btn-default pull-right" v-show="page > 1" @click="changePage(-1)">
            上一页
          </button>
        </div>
        <community-publish-component v-on:publish-new-post="addNewPost" class="mt-20"></community-publish-component>
      </div>
    </div>

  </template>

  <template id="spit">
    <div class="spit" id="spit-box">
      <h4 class="text-center">吐槽墙 
        <small class="pull-right glyphicon "  
          :class="bigBox ? 'glyphicon-resize-small' : 'glyphicon-resize-full'"
          @click="changeScreen">
        </small>
      </h4>
      <div class="content spit-inner">
        <ul class="spit-list-group">
          <spit-list-item-component v-transiton v-if="bigBox" v-for="(item, index) in list.slice(-12, -5)" :item="item">
          </spit-list-item-component>
          <spit-list-item-component v-transiton v-for="(item, index) in list.slice(-5)" :item="item">
          </spit-list-item-component>

        </ul>
        <form action="javascript:void(0)" class="spitInput">
          <div class="input-group">
              <input type="text" class="form-control" v-model="spitInfo" placeholder="请输入想说的话" @keyup.13="newSpit">
              <span class="input-group-btn">
                  <button class="btn btn-default" @click.prevent="newSpit" type="button">吐槽上墙</button>
              </span>
          </div>
        </form>
      </div>
    </div>

  </template>

  <template id="spitListItem">
    <li class="clearfix">
      <div v-if="item.handler">
        <a class="avatar" :href="'/user/center.html?id=' + item.handler.id">{{item.handler.name}} </a>
        <span class="spit-content">：{{item.content}}</span>
        <span class="time pull-right">{{item.createdAt | time}} </span>
      </div>
      <div v-if="item.inform" class="text-center color-gray fontSize12">
        {{item.inform}}
      </div>

    </li>
  </template>


  <template id="newActive">
    <div class="newActive">
      <h4 class="text-center">最新动态</h4>
      <div class="content clearfix">
        <ul class="active-list-group">
          <li class="active-list-group-item" 
            v-for="(item, index) in list" 
            :class="{'last': index == list.length - 1}" 
            >
            <div class="active-item" v-if="item.type == 1">
              <a :href="'/user/center.html?id=' + item.active.handler.id">{{item.active.handler.name}}</a>刚刚 
              <span v-if="item.active.activity.type == 1" >
                做了练习题:
                <a :href="'/test/test.html?id=' + item.active.activity.test.id + '&type=2&userId=' + item.active.handler.id"> 
                    {{item.active.activity.test.name}}
                </a>
              </span>
              <span v-if="item.active.activity.type == 2">
                发表帖子 
                <a :href="'/post/detail.html?id=' + item.active.activity.post.id"> 
                    {{item.active.activity.post.title}}
                </a>
              </span>

            </div>
            <div class="active-item"  v-if="item.type == 2">
              <a :href="'/user/center.html?id=' + item.active.handler.id">
                {{item.active.handler.name}} 
              </a>
              在帖子
              <a :href="'/post/detail.html?id=' + item.active.post.id">
                {{item.active.post.name}} 
              </a>
              回复了
              <a :href="'/user/center.html?id=' + item.active.targeter.id">
                {{item.active.targeter.name}} 
              </a>:
              <span>{{item.active.content}} </span>
            </div>
            <div class="active-item"  v-if="item.type == 3">
              <a :href="'/user/center.html?id=' + item.active.handler.id">
                {{item.active.handler.name}} 
              </a>
              提交了反馈:
              <span>{{item.active.content}} </span>
            </div>
            <div class="active-item"  v-if="item.type == 4">
              管理员{{item.active.handler.name}}
              刚刚新建练习:
              <a :href="'/test/test.html?name=' + item.active.testName + '&type=1'">
                {{item.active.testName}} 
              </a>
            </div>
            <div class="active-item"  v-if="item.type == 5">
              <a :href="'/user/center.html?id=' + item.active.handler.id"">{{item.active.handler.name}}</a>
              {{item.active.content}}
            </div>

          </li>
        </ul>
        <div class="handlerPage pull-right">
          <a href="" class="" @click.prevent="getActiveList(-1)" v-show="page > 1">
            <span class="glyphicon glyphicon-circle-arrow-left"></span>
          </a>
          <a href="" class="" @click.prevent="getActiveList(1)" v-show="list.length == 5">
            <span class="glyphicon glyphicon-circle-arrow-right"></span>
          </a>
        </div>
      </div>
    </div>
  </template>

  

  <script src="/scripts/assets/loadding.js"></script>

  <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
  <script src="/lib/vue/vue-resource.min.js"></script>
  <script src="/lib/layer/jquery.js"></script>
  <script src="/scripts/assets/filter.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script type="text/javascript" src="/scripts/assets/inform-component.js"></script>
  <script src="/scripts/assets/inform.js"></script>
  <script src="/scripts/assets/util.js"></script>
  <script src="scripts/index.js"></script>
</body>
</html>